<%- contentFor('heroContent') %>
  <!-- Hero Banner with Search -->
  <div class="hero-banner detail-hero-banner" style="margin-bottom: 30px;">
    <div class="hero-content">
      <div class="search-box-container">
        <form action="/journals/search" method="GET" class="main-search-form">
          <div class="search-select-wrapper">
            <select name="searchType">
              <option value="all">All</option>
              <option value="title">Title</option>
              <option value="author">Author</option>
              <option value="isbn">ISBN(13 digits)</option>
              <option value="issn">ISSN(8 digits)</option>
              <option value="publisher">Publisher</option>
            </select>
          </div>
          <input type="text" name="query" placeholder="Search journals..." class="main-search-input">
          <button type="submit" class="main-search-btn">
            <i class="search-icon"></i>
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="page-container">
    <!-- 左侧出版商列表 - 已注释掉 -->
    <!--
    <div class="publisher-sidebar">
      <h3>Publisher Imprints</h3>
      <ul class="publisher-list">
        <li>
          <a href="/journals" class="publisher-link">
            All <span class="count">(All journals)</span>
          </a>
        </li>
        <% if (publisherCounts && publisherCounts.length> 0) { %>
          <% publisherCounts.forEach(function(publisher) { %>
            <li>
              <a href="/journals?publisher=<%= encodeURIComponent(publisher.name) %>" class="publisher-link">
                <%= publisher.name %> <span class="count">(<%= publisher.count %>)</span>
              </a>
            </li>
          <% }); %>
        <% } else { %>
          <li>No publishers found</li>
        <% } %>
      </ul>
    </div>
    -->

    <!-- 右侧期刊列表 - 修改为使用grid样式 -->
    <div class="book-list-content" style="width: 100%;">
      <div class="book-list-header">
        <h1>Journal Resources</h1>
        <p>Browse our collection of journals from various publishers.</p>
      </div>

      <!-- 使用index.ejs中的grid样式 -->
      <div class="section-container">
        <div class="book-grid">
          <% if (journals && journals.length> 0) { %>
            <% journals.forEach(function(journal) { %>
              <div class="book-card">
                <a href="/journals/<%= journal.id %>" class="book-link">
                  <div class="book-cover">
                    <% if (journal.CoverImage) { %>
                      <img src="<%= journal.CoverImage %>" alt="<%= journal.Title || 'Journal Cover' %>">
                      <% } else { %>
                        <img src="/images/img.png" alt="<%= journal.Title || 'Journal Title' %>"
                          class="placeholder-image">
                        <% } %>
                  </div>
                  <div class="book-info">
                    <h3 class="book-title">
                      <%= journal.Journals || journal.Title || 'Journal Title' %>
                    </h3>
                    <% if (journal.ISSN) { %>
                      <p class="journal-issn">ISSN: <%= journal.ISSN %>
                      </p>
                      <% } %>
                  </div>
                </a>
              </div>
              <% }); %>
                <% } else { %>
                  <!-- No data card -->
                  <div class="book-card">
                    <div class="book-cover">
                      <img src="/images/img.png" alt="No Journals Found" class="placeholder-image">
                    </div>
                    <div class="book-info">
                      <h3 class="book-title">No Journals Available</h3>
                      <p class="book-author">
                        <% if (publisher) { %>
                          No journals available for publisher "<%= publisher %>"
                            <% } else if (category) { %>
                              No journals available in category "<%= category.charAt(0).toUpperCase() +
                                category.slice(1) %>"
                                <% } else { %>
                                  Please upload journal data
                                  <% } %>
                      </p>
                    </div>
                  </div>
                  <% } %>
        </div>
      </div>

      <div class="pagination">
        <div class="pagination-controls">
          <% if (pagination.hasPrev) { %>
            <a href="/journals?page=1<%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
              class="pagination-btn">First</a>
            <a href="/journals?page=<%= pagination.current - 1 %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
              class="pagination-btn">&laquo;</a>
            <% } %>

              <% let startPage=Math.max(1, pagination.current - 2); let endPage=Math.min(pagination.total,
                pagination.current + 2); %>
                <% if (startPage> 1) { %>
                  <a href="/journals?page=1<%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                    class="pagination-btn">1</a>
                  <% if (startPage> 2) { %>
                    <span class="pagination-ellipsis">...</span>
                    <% } %>
                      <% } %>

                        <% for(let i=startPage; i <=endPage; i++) { %>
                          <a href="/journals?page=<%= i %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                            class="pagination-btn <%= i === pagination.current ? 'active' : '' %>">
                            <%= i %>
                          </a>
                          <% } %>

                            <% if (endPage < pagination.total) { %>
                              <% if (endPage < pagination.total - 1) { %>
                                <span class="pagination-ellipsis">...</span>
                                <% } %>
                                  <a href="/journals?page=<%= pagination.total %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                                    class="pagination-btn">
                                    <%= pagination.total %>
                                  </a>
                                  <% } %>

                                    <% if (pagination.hasNext) { %>
                                      <a href="/journals?page=<%= pagination.current + 1 %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                                        class="pagination-btn">&raquo;</a>
                                      <a href="/journals?page=<%= pagination.total %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                                        class="pagination-btn">Last</a>
                                      <% } %>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* ... existing styles ... */
    /* .publisher-sidebar 和 .publisher-list 样式已移至style.css */
    /* ... existing styles ... */
  </style>
